import { createWebHistory, createRouter } from 'vue-router';

import Home from "../views/Home.vue";
import News from "../views/News.vue";

// 1.定义路由表
const routes = [
  { path: '/', redirect: '/home'},
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/message', component: () => import('../views/Message.vue') },
  { path: '/product/:id', component: () => import('../views/Product.vue') },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/user/User.vue'),
    children: [
      {path: 'profile', name: 'Profile', component: () => import('../views/user/UserProfile.vue')},
      {path: 'email', name: 'Email', component: () => import('../views/user/UserEmail.vue')}
    ]
  },
  {
    path: '/order', 
    component: () => import('../views/Order.vue')
  },
  {
    path: '/employee/:name/:age/:gender', 
    name: 'Employee',
    component: () => import('../views/Employee.vue')
  }
]

// 2.创建路由器实例
const router = createRouter({
  history: createWebHistory(),
  routes,
})

// 全局前置守卫
router.beforeEach((to, from) => {
  // 第一个参数 to 即将进入的路由Route对象
  console.log("to: ", to);
  // 第二个参数 from 即将离开的路由Route对象
  console.log("from: ", from);
  // 可选的第三个参数 next(不推荐使用)
  // 在Vue2中我们是通过next函数来决定如何进行跳转的
  // 但是在Vue3中我们是通过返回值来控制的, 不再推荐使用next函数, 这是因为开发中很容易调用多次next
  
  if(to.path === '/news') {
    console.log("禁止访问");
    return '/';
  }

  // 返回false: 取消导航
  // 返回true或者不返回: 进行默认导航
  // 返回一个路由地址: 通过一个路由地址重定向到一个不同的地址, 如同调用router.push()
  // 备注: 若返回路由地址, 它可以是一个string类型的路径, 也可以是一个对象, 对象中包含path、query、params等信息, 它会中断当前导航，同时用相同的from创建一个新导航
  return true;
})

// 3.导出路由器实例
export default router;

// 4.vue实例使用路由器